import styles from './Templates.module.scss'
import { useColorVar, useStyles } from '@/hooks/styles'
import { FC } from 'react'
import {
  Typography,
  Input,
  Image,
  Button as AntdButton,
  Tabs,
  TabsProps,
  Dropdown,
  MenuProps,
} from 'antd'
import { Card } from '@/components/universal/Card/Card'
import { ListResponsive } from '@/components/universal/ListResponsive/ListResponsive'
import { useNavigate } from 'react-router-dom'
import { IconCopy, IconDelete } from '@arco-design/web-react/icon'
import { SvgIcon } from '@/components/icons'
import { Add_48x48 } from '@/components/icons/Add_48x48'

const Templates = () => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  const navigation = useNavigate()

  const tabItems: TabsProps['items'] = [
    { key: '1', label: '全部' },
    { key: '2', label: '工程机械' },
    { key: '3', label: '汽车' },
    { key: '4', label: '商用飞行器' },
    { key: '5', label: '智能硬件' },
  ]
  return (
    <div {...styleClass(['layout'])}>
      <div {...styleClass(['header-layout'])}>
        <Typography.Text {...styleClass(['header-title'])}>
          设计模板
        </Typography.Text>
        <div {...styleClass(['header-suffix-layout'])}>
          <AntdButton
            {...styleClass([], { color: c('primary') })}
            type={'link'}
          >
            管理
          </AntdButton>
          <AntdButton type={'default'}>导入模板</AntdButton>
          <AntdButton type={'primary'}>新建模板</AntdButton>
        </div>
      </div>
      <div {...styleClass(['filter-layout'])}>
        <Tabs
          {...styleClass(['filter-tabs'])}
          defaultActiveKey="1"
          items={tabItems}
        />
        <div {...styleClass(['filter-suffix-layout'])}>
          <Input.Search
            {...styleClass([], { width: '100%' })}
            placeholder="input search text"
            allowClear
          />
        </div>
      </div>
      <ListResponsive
        {...styleClass(['list-layout'], { gap: 16, minWidth: 400 })}
      >
        <Card
          {...styleClass(['new-card-wrapper'])}
          onClick={() => navigation('/graph')}
        >
          <SvgIcon {...styleClass(['new-card-icon'])} icon={Add_48x48} />
          <Typography.Text {...styleClass(['new-card-text'])}>
            模板智能生成
          </Typography.Text>
        </Card>
        <TemplatesCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/a26e328a3ba1881b.png'}
          title={'汽车前脸设计'}
        />
        <TemplatesCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/a26e328a3ba1881b.png'}
          title={'履带设计'}
        />
        <TemplatesCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/a26e328a3ba1881b.png'}
          title={'挖掘机设计'}
        />
        <TemplatesCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/a26e328a3ba1881b.png'}
          title={'旋钮设计'}
        />
      </ListResponsive>
    </div>
  )
}

export default Templates

interface ITemplatesCard {
  imgUrl?: string
  title?: string
  onClick?: () => void
}

const TemplatesCard: FC<ITemplatesCard> = ({ imgUrl, title = '', onClick }) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <a
          target="_blank"
          rel="noopener noreferrer"
          // href="https://www.antgroup.com"
        >
          复制模板
        </a>
      ),
      icon: <IconCopy />,
    },
    {
      key: '2',
      label: (
        <a
          target="_blank"
          rel="noopener noreferrer"
          // href="https://www.aliyun.com"
        >
          删除模板
        </a>
      ),
      icon: <IconDelete />,
    },
  ]

  return (
    <Card {...styleClass(['card-wrapper'])}>
      <div {...styleClass(['card-img-wrapper'])}>
        <Image width={'100%'} height={156} src={imgUrl} preview={false}></Image>
      </div>
      <div {...styleClass(['card-info-wrapper'])}>
        <Typography.Text {...styleClass(['card-info-title'])} ellipsis>
          {title}
        </Typography.Text>
        <div {...styleClass(['card-info-suffix-layout'])}>
          <AntdButton
            {...styleClass([], { height: 30, padding: '0 6px' })}
            type={'primary'}
          >
            创建流程
          </AntdButton>
          <Dropdown menu={{ items }} placement="bottomLeft" arrow>
            <AntdButton
              {...styleClass([], { height: 30, padding: '0 6px' })}
              type={'default'}
            >
              ...
            </AntdButton>
          </Dropdown>
        </div>
      </div>
    </Card>
  )
}
